<template>
    <view class="classify-box" :style="{height: `${height}px`}">
        <view class="classify-left">
            <scroll-view class="scroll-view" enable-flex :scroll-y="true">
                <view :class="['item', { 'on': state.leftTabId === item.id }]" v-for="item, index in props.data"
                    :key="index" @click="hanldeChangeLeftTab(item)">
                    {{ item.name }}
                </view>
            </scroll-view>
        </view>
        <view class="classify-right">
            <scroll-view class="scroll-view" enable-flex :scroll-y="true">
                <view class="advert-box radius-15">
                    <coreshop-advert :code="advertPosition.goodsClassifyBanner"></coreshop-advert>
                </view>
                <view class="data-box" v-if="state.list && state.list.length > 0">
                    <view class="item-box" v-for="item,index in state.list" :key="index"
                        @click="handleGoCategory(item.id)">
                        <image class="img" :src="item.imageUrl"></image>
                        <view class="name">{{ item.name }}</view>
                    </view>
                </view>
                <view v-else>
                    <coreshop-empty></coreshop-empty>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { reactive, watch } from 'vue';
    import type { CategoriesType } from '@/core/models';
    import { advertPosition } from '@/core/consts';
    import { handleRouteNavigateTo } from '@/core/utils';

    const props = withDefaults(defineProps<{
        data : Array<CategoriesType>,
        height : number,
    }>(), {
        data: () => [],
        height: 0,
    });

    const state = reactive<{
        leftTabId : number;
        list : Array<CategoriesType>
    }>({
        leftTabId: 0,
        list: [],
    });

    watch(() => props.data, (newVal : Array<CategoriesType>) => {
        if(newVal){
            state.leftTabId = newVal[0]?.id;
            state.list = newVal[0]?.child;
        }
    })

    const hanldeChangeLeftTab = (item : CategoriesType) => {
        if (state.leftTabId != item.id) {
            state.leftTabId = item.id;
            state.list = item?.child;
        }
    }

    const handleGoCategory = (id : number) => {
        handleRouteNavigateTo(`/pages/category/category?catId=${id}`)
    }
</script>

<style lang="scss" scoped>
    @import './classify-three.scss';
</style>